import { h } from "vue";
import {
  DatePickerProps,
  InputProps,
  NA,
  NSwitch,
  SelectProps,
  SwitchProps,
} from "naive-ui";
import { TableColumns } from "@/type";

export const Columns = (
  // associationState: associationRuleState
): TableColumns => {
  return [
    {
      type: "selection",
      width: "40px",
      fixed: "left",
      hideInForm: true,
      hideInSearch: true,
    },
    {
      title: "序号",
      key: "id",
      width: "60px",
      align: "center",
      fixed: "left",
      hideInForm: true,
      hideInSearch: true,
    },
    {
      title: "方案名称",
      key: "scenarioName",
      width: "100px",
      align: "center",
      ellipsis: {
        tooltip: true,
      },
      //确定类型
      category: "input",
      formItemProps: {
        placeholder: "请输入",
      } as InputProps,
      hideInSearch: true,
    },
    {
      title: "关联规则",
      key: "associationRules",
      width: "100px",
      align: "center",
      //超出部分用省略号显示
      ellipsis: {
        tooltip: true,
      },
      render: (item) =>
        h(
          NA,
          {
            onClick: () => {
              /* associationState.associationRuleShow = true;
              associationState.groupList = item; */
            },
            style: {
              color: "#1890FF",
            },
          },
          () => `${item.associationRules ?? "0"}条`
        ),
      category: "input",
      formItemProps: {
        placeholder: "请输入",
      } as InputProps,
    },
    {
      title: "校验范围",
      key: "checkRange",
      width: "180px",
      align: "center",
      category: "daterange",
      ellipsis: {
        tooltip: true,
      },
      formItemProps: {
        placeholder: "请选择",
        type: "daterange",
        style: "100%",
      } as DatePickerProps,
      hideInSearch: true,
      render(row) {
        return `${row.checkRange[0]}~${row.checkRange[1]}`;
      },
    },
    {
      title: "执行频率",
      key: "ExecutionFrequency",
      width: "60px",
      align: "center",
      ellipsis: {
        tooltip: true,
      },
      category: "select",
      formItemProps: {
        placeholder: "请选择",
        option: [
          {
            label: "单次",
            value: "ExecutionFrequency1",
          },
          {
            label: "重复",
            value: "ExecutionFrequency2",
          },
        ],
      } as SelectProps,
      hideInSearch: true,
    },
    {
      title: "执行周期",
      key: "executionCycle",
      width: "100px",
      align: "center",
      ellipsis: {
        tooltip: true,
      },
      category: "select",
      formItemProps: {
        placeholder: "请选择",
        option: [
          {
            label: "每天",
            value: "executionCycle1",
          },
          {
            label: "每周周一",
            value: "executionCycle2",
          },
          {
            label: "每月1号",
            value: "executionCycle3",
          },
          {
            label: "每年1月",
            value: "executionCycle4",
          },
        ],
        type: "select",
      } as SelectProps,
      hideInSearch: true,
    },
    {
      title: "执行时间",
      key: "excutionTime",
      width: "100px",
      align: "center",
      ellipsis: {
        tooltip: true,
      },
      category: "datetime",
      formItemProps: {
        placeholder: "请选择",
        option: [],
        type: "datetime",
      } as DatePickerProps,
      hideInSearch: true,
    },
    {
      title: "创建人",
      key: "creator",
      width: "100px",
      align: "center",
      ellipsis: {
        tooltip: true,
      },
      category: "input",
      formItemProps: {
        placeholder: "请输入",
      } as InputProps,
      hideInSearch: true,
    },
    {
      title: "创建时间",
      key: "createTime",
      width: "100px",
      align: "center",
      ellipsis: {
        tooltip: true,
      },
      category: "datetime",
      formItemProps: {
        placeholder: "请选择",
        option: [],
        type: "datetime",
      } as DatePickerProps,
    },
    {
      title: "问题等级",
      key: "problemLevel",
      width: "100px",
      ellipsis: {
        tooltip: true,
      },
      align: "center",
      category: "select",
      formItemProps: {
        placeholder: "请选择",
        option: [
          {
            label: "一般",
            value: "problemLevel1",
          },
          {
            label: "严重",
            value: "problemLevel2",
          },
          {
            label: "重要",
            value: "problemLevel3",
          },
        ],
      } as SelectProps,
      hideInSearch: true,
    },
    {
      title: "备注",
      key: "remark",
      width: "100px",
      ellipsis: {
        tooltip: true,
      },
      align: "center",
      category: "input",
      formItemProps: {
        placeholder: "请填写",
        type: "textarea",
        style: {
          width: "100px",
        },
      },
      hideInSearch: true,
    },
    {
      title: "状态",
      key: "status",
      width: "80px",
      fixed: "right",
      align: "center",
      ellipsis: {
        tooltip: true,
      },
      hideInSearch: true,
      category: "switch",
      formItemProps: {
        type: "switch",
        style: {
          width: "100%",
        },
      } as SwitchProps,
      render(row: any) {
        return [
          h(
            NSwitch,
            {
              value: row.status,
              onClick: () => {
                row.status = !row.status;
              },
            }
            // { default: () => ( row.status ? "启用" : "禁用") }
          ),
        ];
      },
    },
  ];
};
